<!DOCTYPE html>

<html class="no-js">

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title></title>
    <meta name="description" content="" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script src="https://cdn.staticfile.org/axios/0.19.0-beta.1/axios.js"></script>
    <script src="https://cdn.staticfile.org/vue/2.5.17/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jsplumb@2.9.2/dist/js/jsplumb.min.js"></script>
    <link rel="stylesheet" href="https://cdn.staticfil`·e.org/element-ui/2.13.0/theme-chalk/index.css" />
    <script src="https://cdn.staticfile.org/html2canvas/0.5.0-beta4/html2canvas.min.js"></script>
    <script src="https://cdn.staticfile.org/element-ui/2.13.0/index.js"></script>
    <link rel="stylesheet" href="https://cdn.staticfile.org/animate.css/3.7.0/animate.min.css" />
    <link rel="stylesheet" href="../../../lib/index.css" />
    <script src="../../../lib/bee.js"></script>
    <style>
        #bee-orgchart {
            width: 1500px;
            height: 800px;
            /* position: absolute;
            top: 0;
            left: 0; */
        }
    </style>
</head>

<body>
    <div id="app">
        <!-- <div style="width: 1500px; height: 100%; overflow:auto; position: relative;"> -->
            <bee-orgchart 
                :chart="chart" 
                :datascource="datascource"
                @dropchart="dropChart"
                @chartmore="getMore"></bee-orgchart>
        <!-- </div> -->
    </div>
</body>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                content: null,·
                datascource: {}
            }
        },
        computed: {
            chart() {
                return {
                    id: 'bee-orgchart',
                    nodeContent: 'title',
                    nodeNumb: 'id',
                    createNode: true,
                    draggable: true,
                    exportButton: true,
                    exportButtonName: '导出架构图',
                    exportFilename: 'Bee-org-chart',
                    pan: false,
                    zoom: false,
                    direction: 't2b',
                }
            }
        },
        mounted() {
            this.datascource = this.initData()
        },
        methods: {
            initData() {
                return {
                        'name': '广东省厅级市级上海深圳香港纽约伦敦上市集团公司',
                        'title': '广东省厅',
                        'imgurl': 'http://demo.learningleader.com.cn:8840/files/20210906/249eae469a0a4dfcbf63b8bbc837432a.png',
                        'id': 0,
                        'bzm': 12,
                        'gyy': 10,
                        'children': [
                        { 'name': 'Bo Miao', 'title': 'department manager', 'id': 1 },
                        { 'name': 'Su Miao', 'title': 'department manager', 'id': 2,
                            'children': [
                            { 'name': 'Tie Hua', 'title': 'senior engineer', 'id': 3 },
                            { 'name': 'Tie Hua', 'title': 'senior engineer', 'id': 3 },
                            { 'name': 'Tie Hua', 'title': 'senior engineer', 'id': 3 },
                            { 'name': 'Tie Hua', 'title': 'senior engineer', 'id': 3 },
                            { 'name': 'Tie Hua', 'title': 'senior engineer', 'id': 3 },
                            { 'name': 'Tie Hua', 'title': 'senior engineer', 'id': 3 },
                            { 'name': 'Tie Hua', 'title': 'senior engineer', 'id': 3 },
                            { 'name': 'Tie Hua', 'title': 'senior engineer', 'id': 3 },
                            { 'name': 'Hei Hei', 'title': 'senior engineer', 'id': 4,
                                'children': [
                                { 'name': 'Pang Pang', 'title': 'engineer', 'id': 5 },
                                { 'name': 'Xiang Xiang', 'title': '广东省厅级市级上海深圳香港纽约伦敦上市集团公司广东省厅级市级上海深圳香港纽约伦敦上市集团公司', 'id': 6 }
                                ]
                            }
                            ]
                        },
                        { 'name': 'Yu Li', 'title': '广东省厅级市级上海深圳香港纽约伦敦上市集团公司广东省厅级市级上海深圳香港纽约伦敦上市集团公司', 
                        'imgurl': 'https://demo.learningleader.com.cn:8840/files/20210906/249eae469a0a4dfcbf63b8bbc837432a.png',
                        'id': 8 },
                        { 'name': 'Yu Tie', 'title': 'department manager', 
                        'imgurl': 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fgaitaobao3.alicdn.com%2Ftfscom%2Fi2%2F2397141023%2FTB2zUtOF7yWBuNjy0FpXXassXXa_%21%212397141023.jpg_300x300q90.jpg&refer=http%3A%2F%2Fgaitaobao3.alicdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1620878409&t=04f17404f8255d915be56aa772d2b621',
                        'id': 12 }
                        ]
                    }
            },
            dropChart(event) {
                    console.log('draggedNode:' + event.detail.draggedNode.querySelector(':scope > .title').textContent
                    + ', dragZone:' + event.detail.dragZone.querySelector(':scope > .title').textContent
                    + ', dropZone:' + event.detail.dropZone.querySelector(':scope > .title').textContent
                    );
                    console.log('draggedNode:' + event.detail.draggedNode.id)
            },
            getMore(e) {
                alert(9)
            }
        }
    })
</script>

</html>